//
// Copyright 2015-2019 The OpenZipkin Authors
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
// in compliance with the License. You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License
// is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
// or implied. See the License for the specific language governing permissions and limitations under
// the License.
//

.timeline-span {
  width: 100%;
  height: 25px;
  position: relative;
  display: flex;
  cursor: pointer;
  background-color: $white;

  &:hover {
    color: $white;
    background-color: $gray-3;
  }
}

.timeline-span__service-name-column-wrapper {
  border-right: 1px $gray-8 solid;
  box-sizing: border-box;
}

.timeline-span__span-name-column-wrapper {
  border-right: 1px $gray-7 solid;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.timeline-span__span-name-column {
  color: $gray-4;
  font-size: 12px;
  padding-left: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.timeline-span:hover .timeline-span__span-name-column {
  color: $gray-10;
}

.timeline-span__bar-wrapper {
  position: relative;
}

.timeline-span__bar-container {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
}

.timeline-span__bar {
  position: absolute;
  border-radius: 4px;
  height: 70%;

  &--client {
    background-color: $gray-9;
  }
  &--server {}
}

.timeline-span__duration {
  font-size: 12px;
  position: absolute;

  &--left {
    padding-left: 8px;
  }

  &--right {
    padding-right: 8px;
  }
}

.timeline-span__time-marker {
  position: absolute;
  height: 100%;
  width: 1px;
  background-color: $gray-7;
}

.timeline-span__service-name-column {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.timeline-span__open-toggle-button {
  position: absolute;
  cursor: pointer;
  width: 18px;
}

.timeline-span__depth-marker {
  position: absolute;
  margin: 0 8px;
  width: 3px;
  height: 80%;
  border-radius: 1px;
}

.timeline-span__service-name-wrapper {
  position: absolute;
  display: flex;
}

.timeline-span__service-name {
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
